<template>
  <div
    v-loading="isLoading"
    class="panel-property"
  >
    <div class="content">
      <PanelLabelOverflowTooltip
        ref="panelLabelOverflowTooltip"
        :component-style="form.componentStyle"
      />
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        label-width="75px"
      >
        <VsFormItem
          :label="$demoi18n('panel.label.previewVisible')"
          prop="isPreviewVisible"
        >
          <el-switch v-model="form.isPreviewVisible"></el-switch>
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('multi-params.cacheParams')"
          prop="isKeepCache"
        >
          <el-switch v-model="form.isKeepCache"></el-switch>
        </VsFormItem>

        <BaseOption
          :form="form"
          option="componentStyle"
        />
        <OptionCollapse>
          <el-collapse-item
            :title="$demoi18n('word.buttonStyle')"
            name="cssStyle.icon"
          >
            <BaseOption
              :form="form"
              option="cssStyle.icon"
              :df-css-style-attrs="dfCssStyleAttrs.icon"
            />
          </el-collapse-item>
        </OptionCollapse>

        <el-button
          class="btn-sure edit_btn"
          type="primary"
          size="default"
          @click="openEditor"
        >
          {{ $demoi18n('btn.parameterEdit') }}
        </el-button>
        <el-table
          class="config-panel-table"
          :data="form.params"
          :max-height="570"
        >
          <el-table-column
            type="index"
            :label="$demoi18n('word.serialNumber')"
            :width="35"
          >
            <template #header>
              <el-tooltip
                placement="top"
                :content="$demoi18n('word.serialNumber')"
                :effect="xvueTheme"
              >
                <span>{{ $demoi18n('word.serialNumber') }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            :label="$demoi18n('multiParams.panel.fieldNameEvtKey')"
            :width="110"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              {{ scope.row.key }}
              <br />
              ({{ scope.row.desc }})
            </template>
          </el-table-column>
          <el-table-column
            :label="$demoi18n('word.defaultValue')"
            :width="110"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              {{ scope.row.value }}
              <br />
              ({{ scope.row.valueType }})
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="$demoi18n('multiParams.title.publicParameterSetting')"
      class="multi-params-dialog"
      :class="`${customClassVsMultiParamsEditor} ${visualThemeClassName} ${xvueNameSpace}`"
      :close-on-click-modal="false"
      :append-to-body="true"
      :destroy-on-close="true"
      @close="cancel"
    >
      <el-button
        class="add_param_item btn-sure"
        type="primary"
        size="default"
        icon="CirclePlus"
        @click="addNewParam"
      >
        {{ $demoi18n('btn.addParameters') }}
      </el-button>
      <el-form
        ref="settingForm"
        :model="paramsForm"
      >
        <el-table
          class="config-panel-table"
          :data="paramsForm.params"
          max-height="500"
        >
          <el-table-column
            type="index"
            :label="$demoi18n('word.serialNumber')"
            :width="60"
          >
            <template #header>
              <el-tooltip
                placement="top"
                :content="$demoi18n('word.serialNumber')"
                :effect="xvueTheme"
              >
                <span>{{ $demoi18n('word.serialNumber') }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="desc"
            :label="$demoi18n('panel.label.parameterName')"
            :width="150"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <span class="mapping-scope">
                *
              </span>
              <VsFormItem
                :prop="`params[${scope.$index}].desc`"
                :rules="generateRules()"
              >
                <el-input
                  v-model="scope.row.desc"
                  size="default"
                  :placeholder="$demoi18n('placeholder.enterName')"
                ></el-input>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column
            prop="key"
            :label="$demoi18n('multiParams.panel.fieldNameEvtKey')"
            :width="150"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <span class="mapping-scope">
                *
              </span>
              <VsFormItem
                :prop="`params[${scope.$index}].key`"
                :rules="generateRules()"
              >
                <el-input
                  v-model="scope.row.key"
                  size="default"
                  :placeholder="$demoi18n('placeholder.plsEnterfieldNameEvtKey')"
                ></el-input>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column
            prop="value"
            :label="$demoi18n('multiParams.th.parameterDfVal')"
            :width="150"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <VsFormItem :prop="`params[${scope.$index}].value`">
                <div class="value_col">
                  <el-date-picker
                    v-if="scope.row.valueType === 'date'"
                    v-model="scope.row.value"
                    :popper-class="popperClassDatePicker"
                    type="date"
                    :placeholder="$demoi18n('word.selectDate')"
                    size="default"
                    @change="changeDate($event, scope.row)"
                  ></el-date-picker>
                  <el-input
                    v-if="scope.row.valueType === 'number'"
                    v-model="scope.row.value"
                    size="default"
                    :placeholder="'panelEvent.label.eventKey'"
                    @change="changeNum($event, scope.row)"
                  ></el-input>
                  <ValueInputer
                    v-if="scope.row.valueType === 'string'"
                    v-model:value="scope.row.value"
                    :rules="genRulesByKey('params.[x].value')"
                    :clearable="false"
                  />
                  <el-dropdown v-if="scope.row.valueType !== 'date'" placement="bottom-end">
                    <span class="el-dropdown-link">
                      <el-icon style="margin-left: 5px; margin-top: 14px;"><ArrowDown /></el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu
                        :class="visualThemeClassName"
                        :popper-class="'select-poper-' + xvueTheme"
                      >
                        <el-dropdown-item
                          v-for="(n, i) in scope.row.optionValues"
                          :key="i"
                          @click="setItemValue(scope.row, i)"
                        >
                          {{ n.value }}
                          <template v-if="n.desc">
                            ({{ n.desc }})
                          </template>
                        </el-dropdown-item>
                        <el-dropdown-item @click="editOptionValues(scope.row)">
                          <span
                            class="vs_edit_option_values"
                            style="color:#599ef3"
                          >
                            {{ $demoi18n('multiParams.option.setAlternativeValue') }}
                          </span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column
            prop="valueType"
            :label="$demoi18n('multiParams.th.parameterType')"
            :width="120"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <span class="mapping-scope">
                *
              </span>
              <VsFormItem
                :prop="`params[${scope.$index}].valueType`"
                :rules="generateRules()"
              >
                <el-select
                  v-model="scope.row.valueType"
                  :class="'panel-data-select-' + xvueTheme"
                  :popper-class="'select-poper-' + xvueTheme"
                  size="default"
                  :placeholder="$demoi18n('placeholder.plsSelectDataType')"
                  @change="changeValueType($event, scope.row)"
                >
                  <el-option
                    value="string"
                    :label="$demoi18n('word.string')"
                  ></el-option>
                  <el-option
                    value="number"
                    :label="$demoi18n('word.numValue')"
                  ></el-option>
                  <el-option
                    value="date"
                    :label="$demoi18n('word.date')"
                  ></el-option>
                </el-select>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column
            :label="$demoi18n('word.operation')"
            :width="100"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <el-button
                :link="true"
                type="primary"
                icon="Delete"
                size="small"
                :title="$demoi18n('btn.delete')"
                @click="delParam(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <template #footer>
        <span>
          <el-button
            class="button-cancel"
            size="small"
            @click="cancel"
          >
            {{ $demoi18n('btn.cancel') }}
          </el-button>
          <el-button
            class="btn-sure"
            size="small"
            type="primary"
            @click="saveParams"
          >
            {{ $demoi18n('btn.confirm') }}
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="optionDialogVisible"
      :title="$demoi18n('multiParams.editAlternative')"
      class="multi-params-dialog"
      :class="`${customClassVsMultiParamsOptionValuesDialog} ${visualThemeClassName} ${xvueNameSpace}`"
      :close-on-click-modal="false"
      :append-to-body="true"
      :destroy-on-close="true"
      @close="cancelOptionDialog"
    >
      <el-button
        class="add_option_value btn-sure"
        type="primary"
        size="default"
        icon="CirclePlus"
        @click="addNewOptionValue"
      >
        {{ $demoi18n('btn.addAlternative') }}
      </el-button>
      <el-form
        ref="defaltValueForm"
        :model="optionItem"
      >
        <el-table
          class="config-panel-table"
          :data="optionItem.optionValues"
          max-height="500"
        >
          <el-table-column
            type="index"
            :label="$demoi18n('word.serialNumber')"
            :width="60"
          ></el-table-column>
          <el-table-column
            prop="value"
            :label="$demoi18n('word.alternativeValue')"
            :width="150"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <span class="mapping-scope">
                *
              </span>
              <VsFormItem
                :prop="`optionValues[${scope.$index}].value`"
                :rules="generateRules()"
              >
                <el-input
                  v-model="scope.row.value"
                  :placeholder="'panelEvent.label.eventKey'"
                  size="default"
                ></el-input>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column
            prop="desc"
            :label="$demoi18n('multiParams.th.alternativeValueDesc')"
            :width="150"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <VsFormItem
                :prop="`optionValues[${scope.$index}].desc`"
                :rules="
                  generateRules({
                    required: false,
                  })
                "
              >
                <el-input
                  v-model="scope.row.desc"
                  :placeholder="$demoi18n('placeholder.plsEnterDescription')"
                  size="default"
                ></el-input>
              </VsFormItem>
            </template>
          </el-table-column>
          <el-table-column
            :label="$demoi18n('word.operation')"
            :width="100"
            :render-header="renderTableHeader"
          >
            <template #default="scope">
              <el-button
                :link="true"
                type="primary"
                icon="Delete"
                size="small"
                :title="$demoi18n('btn.delete')"
                @click="delOptionValue(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <span>
          <el-button
            class="button-cancel"
            size="small"
            @click="cancelOptionDialog"
          >{{ $demoi18n('btn.cancel') }}</el-button>
          <el-button
            class="btn-sure"
            size="small"
            type="primary"
            @click="saveOptionValues"
          >{{
            $demoi18n('btn.confirm')
          }}</el-button>
        </span>
      </template>
    </el-dialog>
    <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form" />
  </div>
</template>

<script lang="jsx">
import BaseOption from '@/components/common/base-option/base-option.vue';
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import { genRulesByKey } from '@/utils/rules';
import { $confirm } from '@/utils/util';
import dayjs from 'dayjs';
import dfCssStyleAttrs from './cssStyle-default.js';

export default {
  name: 'PanelProperty',
  components: { ValueInputer, BaseOption, OptionCollapse, PanelLabelOverflowTooltip },
  mixins: [panelPropertyBase],
  props: ['config', 'widgetInstanceId', 'widget'],
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      xvueTheme: window._adoPremise.uc.theme, // 'dark',
      customClassVsMultiParamsEditor: `vs_multi_params_editor vs_multi_params_editor-${window._adoPremise.uc
        .theme || 'light'}`,
      customClassVsMultiParamsOptionValuesDialog: 'vs_multi_params_option_values_dialog ' +
        `vs_multi_params_option_values_dialog-${window
          ._adoPremise.uc.theme || 'light'}`,
      popperClassDatePicker: `date_range_component_${window._adoPremise.uc.theme || 'light'}`,
      isLoading: false,
      form: {},
      paramsForm: {},
      dialogVisible: false,
      optionDialogVisible: false,
      curItem: {},
      optionItem: { optionValues: [{ value: '', desc: '' }] },
      dfCssStyleAttrs: {},
    };
  },
  computed: {},
  created() {
    if (this.config) {
      this.form = JSON.parse(JSON.stringify(this.config.config.property));
      this.paramsForm = JSON.parse(JSON.stringify(this.form));
    }
    this.initDfCssStyleAttrs();
  },
  methods: {
    openEditor() {
      this.dialogVisible = true;
      this.paramsForm = JSON.parse(JSON.stringify(this.form));
    },
    addNewParam() {
      this.paramsForm.params.push({
        key: '',
        value: '',
        valueType: 'string',
        desc: '',
        optionValues: [],
      });
    },
    saveParams() {
      this.$refs.settingForm.validate(valid => {
        if (!valid) {
          return;
        }
        if (this.checkList()) {
          const fn = () => {
            this.paramsForm.params.forEach(n => {
              if (n.valueType === 'number') {
                n.value = Number(n.value);
              } else {
                n.value = `${n.value}`;
              }
            });
            this.form.params = JSON.parse(JSON.stringify(this.paramsForm.params));
            this.dialogVisible = false;
          };

          if (this.form.params.length === 0) {
            fn();
          } else {
            $confirm(this.$demoi18n('message.confirmSaveSetting'), this.$demoi18n('popup.title.tips'), {
              confirmButtonText: this.$demoi18n('btn.confirm'),
              cancelButtonText: this.$demoi18n('btn.cancel'),
              type: 'warning',
            }).then(() => {
              fn();
            });
          }
        }
      });
    },
    delParam(item) {
      const index = this.paramsForm.params.indexOf(item);
      this.paramsForm.params.splice(index, 1);
    },
    checkHasSavedItem(item) {
      return this.form.params.some(n => n.key === item.key);
    },
    checkList() {
      let check = true;
      const keysList = [];
      for (let i = 0; i < this.paramsForm.params.length; i++) {
        const n = this.paramsForm.params[i];

        if (!n.key || !n.valueType) {
          check = false;
          this.$message({
            message: this.$demoi18n('message.fieldNameEvtKeyRequired'),
            type: 'warning',
          });
          break;
        }

        if (keysList.includes(n.key)) {
          check = false;
          this.$message({
            message: this.$demoi18n('message.fieldNameEvtKeyDuplicated', [n.key]),
            type: 'warning',
          });
          break;
        }
        keysList.push(n.key);
      }
      return check;
    },
    cancel() {
      this.dialogVisible = false;
    },
    editOptionValues(item) {
      this.curItem = item;
      this.optionItem = JSON.parse(JSON.stringify(this.curItem));
      if (!this.optionItem.optionValues.length) {
        this.optionItem.optionValues = [{ value: '', desc: '' }];
      }
      this.optionDialogVisible = true;
    },
    addNewOptionValue() {
      this.optionItem.optionValues.push({
        value: '',
        desc: '',
      });
    },
    delOptionValue(item) {
      const index = this.optionItem.optionValues.indexOf(item);
      this.optionItem.optionValues.splice(index, 1);
    },
    cancelOptionDialog() {
      this.optionDialogVisible = false;
    },
    saveOptionValues() {
      this.$refs.defaltValueForm.validate(valid => {
        if (!valid) {
          return;
        }
        this.optionItem.optionValues.forEach(n => {
          n.value = n.value.trim();
          n.desc = n.desc.trim();
        });
        this.optionItem.optionValues = this.optionItem.optionValues.filter(n => n.value);
        this.curItem.optionValues = JSON.parse(JSON.stringify(this.optionItem.optionValues));
        this.optionDialogVisible = false;
      });
    },
    setItemValue(item, valueIndex) {
      item.value = item.optionValues[valueIndex].value;
    },
    changeValueType(valueType, item) {
      if (valueType === 'date') {
        if (/^\d{4}-\d{2}-\d{2}$/.test(item.value)) {
          item.value = `${item.value}`;
        } else {
          item.value = '';
        }
      }
      if (valueType === 'number') {
        if (/^\d+(\.\d+)?$/.test(item.value)) {
          item.value = Number(item.value);
        } else {
          item.value = 0;
        }
      }
      if (valueType === 'string') {
        item.value = item.value ? `${item.value}` : '';
      }
    },
    changeDate(val, item) {
      if (val) {
        const val1 = dayjs(val).format('YYYY-MM-DD');
        item.value = val1;
      }
    },
    changeNum(val, item) {
      if (item.valueType === 'number') {
        let _val = parseFloat(item.value);
        if (isNaN(_val)) {
          _val = 0;
        }
        item.value = `${_val}`;
      }
    },
    initDfCssStyleAttrs() {
      this.dfCssStyleAttrs = dfCssStyleAttrs;
    },
    genRulesByKey,
    renderTableHeader({ column }) {
      return (
        <el-tooltip placement="top" content={column.label} effect={this.xvueTheme}>
          <span>{column.label}</span>
        </el-tooltip>
      );
    },
  },
};
</script>

<style lang="less" scoped>
.panel-property {
  :deep(.el-input__wrapper) {
    line-height: 28px;
  }
  .content {
    .input-number {
      width: 80px;
      :deep(.el-input-number__decrease) {
        width: 19px;
        background-color: #fff;
      }
      :deep(.el-input-number__increase) {
        width: 19px;
        background-color: #fff;
      }
      :deep(.el-input__wrapper) {
        padding-left: 19px;
        padding-right: 19px;
      }
    }
    .input-number-left {
      margin-right: 25px;
    }
    .prop-form {
      padding: 0 10px;
      :deep(.el-form-item) {
        margin-bottom: 0;
      }
    }
    :deep(.cell) {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .edit_btn {
      margin-top: 10px;
    }
  }
}
.multi-params-dialog {
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
  .config-panel-table {
    .el-form-item__error {
      top: 100%;
      padding-top: 0;
    }
    .is-error {
      margin-bottom: 50px;
      white-space: normal;
      word-break: break-word;
    }
    .mapping-scope {
      color: #f56c6c;
      position: absolute;
      left: 0px;
      top: 15%;
    }
  }
}
</style>
<style lang="less">
.vs_multi_params_editor {
  width: 800px;
  .value_col {
    display: flex;
    width: 100%;
    .el-dropdown-link {
      width: 20px;
      height: 27px;
      display: flex;
      justify-content: center;
      margin-left: -25px;
      align-items: center;
      &:focus{
        outline: none;
      }
    }
  }
  .cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.vs_multi_params_option_values_dialog {
  width: 600px;
  .cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
<style lang="less">
@font_color_dark: #98cae6;
@font_color_active_dark: #00f0ff;
@background_color_dark: #071f30;
@bgColor_dark: #000c17;
@borderColor_dark: #116584;
@textColor_dark: #ffffff;
.vs_multi_params_editor-dark,
.vs_multi_params_option_values_dialog-dark {
  :deep(.el-dialog__header) {
    background: #183c5a;
    .el-dialog__title {
      font-size: 16px;
      color: #fff;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
  }

  :deep(.el-dialog__body) {
    color: #606266;
    background: #0e2b40;

    // 表格
    .config-panel-table {
      color: @font_color_dark;
      background-color: #0e2b40;
      border-color: #116584;
      &::before {
        background-color: #0e2b40;
      }

      .cell {
        padding: 0 3px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      td,
      th {
        padding: 5px 0 !important;
      }

      .el-table__header {
        th {
          background-color: #122b40 !important;
          border-color: #122b40;
          color: @font_color_dark;
        }
      }

      .el-table__body {
        tr {
          td {
            background-color: @background_color_dark;
            border-color: @background_color_dark;

            .el-input {
              .el-input__wrapper {
                border-color: @borderColor_dark;
                color: @textColor_dark;
                background-color: @bgColor_dark;
              }
            }
          }
        }
      }

      .el-table__empty-block {
        background-color: #093758;

        .el-table__empty-text {
          color: @font_color_active_dark;
        }
      }
    }
    .el-form-item__label {
      color: @font_color_dark;
    }
    .el-form-item__content {
      .el-input {
        .el-input__wrapper {
          border-color: @borderColor_dark;
          color: @textColor_dark;
          background-color: @bgColor_dark;
        }

        .el-input__icon {
          color: @borderColor_dark;
        }
      }

      .el-radio-group {
        .el-radio {
          color: @textColor_dark;

          .el-radio__input {
            .el-radio__inner {
              border-color: @font_color_active_dark;
              background-color: unset;
            }
          }

          .is-checked {
            .el-radio__inner {
              &::after {
                background-color: @font_color_active_dark;
              }
            }
          }

          .el-radio__label {
            color: #fff;
          }
        }
      }
    }
  }

  :deep(.el-dialog__footer) {
    color: #606266;
    background: #0e2b40;
  }

  // 默认按钮样式类
  .btn-sure {
    background-color: #0eb4c2;
    border-color: #0eb4c2;
    color: #fff;

    .el-icon-circle-plus {
      color: #fff;
    }
  }

  .button-cancel {
    background-color: #064559;
    border-color: #064559;
    color: #fff;

    .el-icon-circle-plus {
      color: #fff;
    }
  }
}
</style>

<style lang="less">
.vis-dropdown-menu-dark {
  background-color: #091a2d !important;
  border-color: #588ba8 !important;

  .popper__arrow {
    &::after {
      border-bottom-color: #091a2d !important;
    }
  }
}
</style>

<style lang="less">
@bgColor: #091a2d;
@liBgColor: rgb(62, 75, 119);
@textColor: #adc5d9;
@currentColor: #00aaff;
@disableColor: #868686;
// 日期蓝黑样式
.date_range_component_dark {
  color: @textColor;
  border: 1px solid @liBgColor;
  background: @bgColor;
  .el-picker-panel {
    background: @bgColor;
  }
  .el-date-picker__header {
    .el-picker-panel__icon-btn {
      color: @textColor;
    }
    .el-date-picker__header-label {
      color: @textColor;
      font-size: 12px;
    }
  }
  .el-picker-panel__footer {
    display: none;
    background-color: @bgColor;
    border-top: 1px solid @textColor;
    .el-button--text {
      display: none;
    }
    .el-picker-panel__link-btn {
      background-color: #4ca3bf;
      border: 1px solid #1a5171;
      color: #f4f5f6;
    }
  }
  .el-picker-panel__body {
    .el-date-picker__time-header {
      .el-date-picker__editor-wrap {
        .el-input {
          .el-input__wrapper {
            background-color: @bgColor;
            color: @textColor;
            border: 1px solid @liBgColor;
          }
          .el-input__wrapper:focus {
            border-color: @liBgColor;
          }
          .el-input__prefix {
            .el-input__icon {
              color: @textColor;
            }
          }
        }

        .el-time-panel {
          border: 1px solid @liBgColor;
          background-color: @bgColor;
          .el-time-spinner__item {
            color: @disableColor;
          }
          .el-time-spinner__item.is-active:not(.disabled) {
            color: @textColor;
          }
          .el-time-spinner__item:hover:not(.disabled):not(.is-active) {
            background-color: @bgColor;
          }
          .el-time-panel__footer {
            display: none;
          }
        }
      }
    }
    .el-date-table {
      th {
        color: @textColor;
        border-bottom: solid 1px @textColor;
      }
      td.next-month,
      td.prev-month {
        color: @textColor;
      }
      td.current span {
        color: @currentColor;
        background-color: @bgColor;
      }
      td.disabled div {
        background-color: @bgColor;
        color: @disableColor;
      }
    }

    .is-week-mode {
      .el-date-table__row {
        &:hover div {
          background-color: @liBgColor !important;
          color: @textColor;
        }
      }
      .current {
        div {
          background-color: @liBgColor !important;
        }
        &:hover div {
          color: @textColor;
        }
      }
    }

    .el-month-table,
    .el-year-table {
      td .cell {
        color: @textColor;
      }
      td.current .cell,
      td.today .cell {
        color: #00aaff;
      }
      td.disabled .cell {
        background-color: @bgColor;
        color: @disableColor;
      }
    }
  }

  .popper__arrow {
    border-bottom-color: @bgColor !important;
    &::before {
      width: 0;
    }
    &::after {
      border-bottom-color: @bgColor !important;
    }
  }
  & .el-popper[x-placement^='top'] {
    .popper__arrow:after {
      border-top-color: #0d263a !important;
    }
  }
}
</style>
